<template>
  <div>
    <!-- 引入列表组件 -->
    <Table ref="myTable" :tableTitles="titles" :url="this.utils.myurl.sysRoleList" :pEdit="updatePowerDialog"/>
    <div style="text-align: left; margin: 20px;">
      <el-button type="primary" @click="dialogFormVisible = true">新增角色</el-button>
    </div>


    <!-- 权限选择的弹出框 -->
    <el-dialog title="权限管理" :visible.sync="dialogPowerVisible">
      <el-tree
        :data="treeData"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        check-strictly="true"
        :default-checked-keys="hasPowerIds"
        :props="defaultProps">
      </el-tree>


      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPowerVisible = false">取 消</el-button>
        <el-button type="primary" @click="updatePower">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Table from './Table.vue'

export default {
  name: 'SysRoleManager',
  components: {Table},
  methods: {
    //弹出修改权限的dialog
    updatePowerDialog(roleInfo){
      this.roid = roleInfo.roId;
      var vt = this;
      //ajax请求后端权限列表
      this.utils.myajax({
        type: 'GET',
        url: this.utils.myurl.sysPowerListByRoid,
        data: {
          roid: vt.roid
        },
        success: function(data){
          vt.treeData = data;
          //重置集合
          vt.hasPowerIds = [];
          //找到哪些对象已经被选中
          vt.getHaspowerId(data);
        }
      });

      this.dialogPowerVisible = true;
    },
    //提交修改角色对应的权限信息
    updatePower(){
      var roid = this.roid;
      var powerids = this.$refs.tree.getCheckedKeys();
      this.utils.myajax({
        type: 'POST',
        url: this.utils.myurl.sysPowerUpdateByRoid,
        data: {
          roid: roid,
          poids: JSON.stringify(powerids)
        },
        success: function(data){
          alert(data);
        }
      });
    },
    //递归遍历所有权限，获取当前角色拥有的权限
    getHaspowerId(powerTree){
      if (powerTree) {
        for(var i = 0; i < powerTree.length; i++){
          var power = powerTree[i];
          if(power.checked){
            //当前角色拥有该权限
            this.hasPowerIds.push(power.id);
          }

          //处理子节点
          var sonPower = power.children;
          this.getHaspowerId(sonPower);
        }
      }
    }
  },
  data(){
    return {
      //当前编辑的角色id
      roid: "",
      //权限弹窗的属性
      dialogPowerVisible: false,
      //权限树的数据值
      treeData: [],
      //当前角色拥有的权限id集合
      hasPowerIds: [],
      defaultProps: {
        children: 'children',
        label: 'prName'
      },
      titles: [
        {
          prop: 'roId',
          label: 'id',
          width: '100',
          fixed: true
        },
        {
          prop: 'roleName',
          label: '角色名称',
          width: '150',
          fixed: true
        },
        {
          prop: 'roleFlag',
          label: '角色标识',
          width: '150',
          fixed: true
        },
        {
          prop: 'createTime',
          label: '创建时间',
          width: '150',
          fixed: true
        },
        {
          prop: 'updateTime',
          label: '修改时间',
          width: '150',
          fixed: true
        },
        {
          prop: 'status',
          label: '状态',
          width: '150',
          fixed: true
        }
      ]
    }
  }
}
</script>

<style>
</style>
